<template>
	<div class="wrap">
		<div class="top">
			<img src="../assets/1.jpg" class="sm" />
			<input type="text" class="ss" placeholder="搜索" />
			<img src="../assets/2.jpg" class="gw" />
		</div>
		<div class="banner">
			<img src="../assets/3.jpg" />
		</div>
		<div class="nav">
			<dl>
				<dt><img src="../assets/shouye-rukou1@2x.png"/></dt>
				<dd>胖虎自营</dd>
			</dl>
			<dl>
				<dt><img src="../assets/shouye-rukou2@2x.png" /></dt>
				<dd>达人社区</dd>
			</dl>
			<dl>
				<dt><img src="../assets/shouye-rukou3@2x.png" /></dt>
				<dd>鉴定评估</dd>
			</dl>
			<dl>
				<dt><img src="../assets/shouye-rukou4@2x.png" /></dt>
				<dd>养护维修</dd>
			</dl>
		</div>
		<div class="nav">

			<dl>
				<dt><img src="../assets/shouye-rukou5@2x.png"/></dt>
				<dd>胖虎门店</dd>
			</dl>
			<dl>
				<dt><img src="../assets/shouye-rukou6@2x.png" /></dt>
				<dd>好店收藏</dd>
			</dl>
			<dl>
				<dt><img src="../assets/shouye-rukou7@2x.png" /></dt>
				<dd>领券中心</dd>
			</dl>
			<dl>
				<dt><img src="../assets/shouye-rukou8@2x.png" /></dt>
				<dd>胖虎管家</dd>
			</dl>
		</div>
		<div class="article_a">
			<h1>胖虎特卖</h1>
			<div class="article_a1">
				<dl>
					<dt>
							<img src="../assets/1-2.jpg" />
						</dt>
					<dd>

						<p>
							<a href="#">浪琴车旗...</a>
						</p>
						<p>
							<a href="#">¥9678</a>
						</p>
						<p>
							<a href="#">¥8799</a>
						</p>

					</dd>
				</dl>
				<dl>
					<dt>
							<img src="../assets/1-3.jpg" />
						</dt>
					<dd>
						<p>
							<a href="#">浪琴车旗...</a>
						</p>
						<p>
							<a href="#">¥9678</a>
						</p>
						<p>
							<a href="#">¥8799</a>
						</p>
					</dd>
				</dl>
				<dl>
					<dt>
							<img src="../assets/1-4.jpg" />
						</dt>
					<dd>
						<p>
							<a href="#">浪琴车旗...</a>
						</p>
						<p>
							<a href="#">¥9678</a>
						</p>
						<p>
							<a href="#">¥8799</a>
						</p>
					</dd>
				</dl>
				<dl>
					<dt>
							<img src="../assets/1-5.jpg" />
						</dt>
					<dd>
						<p>
							<a href="#">浪琴车旗...</a>
						</p>
						<p>
							<a href="#">¥9678</a>
						</p>
						<p>
							<a href="#">¥8799</a>
						</p>
					</dd>
				</dl>
				<dl>
					<dt>
							<img src="../assets/1-6.jpg" />
						</dt>
					<dd>
						<p>
							<a href="#">浪琴车旗...</a>
						</p>
						<p>
							<a href="#">¥9678</a>
						</p>
						<p>
							<a href="#">¥8799</a>
						</p>
					</dd>
				</dl>
			</div>
		</div>

		<div class="article_b">
			<h1>限时抢~周日10点专场<span>距开始</span><span>1天 01.50.02</span></h1>
			<div class="article_a1">
				<dl>
					<dt>
							<img src="../assets/1-2.jpg" />
						</dt>
					<dd>

						<p></p>
						<p></p>
						<p>
							<a href="#">¥8799</a>
						</p>

					</dd>
				</dl>
				<dl>
					<dt>
							<img src="../assets/1-3.jpg" />
						</dt>
					<dd>
						<p></p>
						<p></p>
						<p>
							<a href="#">¥8799</a>
						</p>
					</dd>
				</dl>
				<dl>
					<dt>
							<img src="../assets/1-4.jpg" />
						</dt>
					<dd>
						<p></p>
						<p></p>
						<p>
							<a href="#">¥8799</a>
						</p>
					</dd>
				</dl>
				<dl>
					<dt>
							<img src="../assets/1-5.jpg" />
						</dt>
					<dd>
						<p></p>
						<p></p>
						<p>
							<a href="#">¥8799</a>
						</p>
					</dd>
				</dl>
				<dl>
					<dt>
							<img src="../assets/1-6.jpg" />
						</dt>
					<dd>
						<p></p>
						<p></p>
						<p>
							<a href="#">¥8799</a>
						</p>
					</dd>
				</dl>
			</div>
		</div>
		<div class="article_c">
			<div class="article_c1">
				<h1>百变佳人</h1>
				<h1>你的气质和什么包包最搭</h1>
			</div>
			<div class="article_c2">
				<h1>与众不同 背限量美包不尴尬</h1>

			</div>
			<div class="article_c3">
				<h1>轻装上阵 收拾行装出去浪</h1>

			</div>
		</div>
		<div class="nav_a">
			<ul>
				<li>
					<a href="#">推荐</a>
				</li>
				<li>
					<a href="#">最新</a>
				</li>
				<li>
					<a href="#">包袋</a>
				</li>
				<li>
					<a href="#">腕表</a>
				</li>
			</ul>
		</div>
		<div class="article_d">
			<dl>
				<dt>
						<img src="../assets/1-10.jpg" />
					</dt>
				<dd class="article_d1">Dior五格戴妃包刺绣盾牌限量版，92新，边角和金</dd>
				<dd class="article_d2">¥11800</dd>
			</dl>
			<dl>
				<dt>
						<img src="../assets/1-10.jpg" />
					</dt>
				<dd class="article_d1">Dior五格戴妃包刺绣盾牌限量版，92新，边角和金</dd>
				<dd class="article_d2">¥11800</dd>
			</dl>
		</div>
		<div class="article_d">
			<dl>
				<dt>
						<img src="../assets/1-10.jpg" />
					</dt>
				<dd class="article_d1">Dior五格戴妃包刺绣盾牌限量版，92新，边角和金</dd>
				<dd class="article_d2">¥11800</dd>
			</dl>
			<dl>
				<dt>
						<img src="../assets/1-10.jpg" />
					</dt>
				<dd class="article_d1">Dior五格戴妃包刺绣盾牌限量版，92新，边角和金</dd>
				<dd class="article_d2">¥11800</dd>
			</dl>
		</div>

		<div class="bottom"></div>
	</div>
</template>
<script>
	export default {
		//		name: 'HelloWorld',
		//		data() {
		//			return {
		//				msg: 'Welcome to Your Vue.js App'
		//			}
		//		}
	}
</script>

<style scoped>
	/*.wrap{
		width: 100%
	}*/
	
	.top {
		width: 100%;
		height: 88px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}
	
	.sm {
		width: 38px;
		height: 38px;
		margin-left: 10px;
		margin-right: 20px;
	}
	
	.ss {
		width: 100%;
		height: 60px;
		border: none;
		background-color: #e0e0e0;
		border-radius: 5px;
		outline: none;
		text-indent: 10px;
		font-size: 20px;
	}
	
	.gw {
		width: 36px;
		height: 36px;
		margin-right: 10px;
		margin-left: 20px;
	}
	
	.banner {
		width: 100%;
	}
	
	.banner img {
		width: 100%;
	}
	
	.nav {
		display: flex;
		padding-top: 10px;
		padding-bottom: 35px;
		background-color: #FFFFFF;
	}
	
	.nav dl {
		text-align: center;
		width:25%;
	}
	
	.nav dt {
		width: 80%;
		margin: 10%;
	}
	
	.nav dt img {
		width: 80%;
		height: 80%;
	}
	
	.nav dd {
		width: 100%;
		color: #959595;
		margin-top: 5px;
		font-size: 0.3rem;
	}
	
	.article_a {
		width: 100%;
		margin-top: 20px;
		background-color: #FFFFFF;
	}
	
	.article_a h1 {
		margin-right: 20px;
		padding-top: 30px;
		padding-bottom: 20px;
		padding-left: 10px;
		font-size: 0.26rem;
		color: #1b1b1b;
		background: url(../assets/1-1.jpg) no-repeat right;
		background-size: 2%;
	}
	
	.article_a1 {
		display: flex;
		justify-content: space-between;
		margin: 20px 10px 20px 10px;
	}
	.article_a1 dl{
		width: 18%;
		margin: 1%;
		flex: 1;
	}
	.article_a1 dl img {
		width: 100%;
		
	}
	
	.article_a1 dd p {
		font-size: 0.12rem;
		text-align: center;
		width: 100%;
	}
	
	.article_a1 dd p:nth-child(1) a {
		color: #c9c9c9;
		font-size: 0.18rem;
	}
	
	.article_a1 dd p:nth-child(2) a {
		color: #c9c9c9;
		font-size: 0.24rem;
		text-decoration: line-through;
	}
	
	.article_a1 dd p:nth-child(3) a {
		color: #4d4d4d;
		font-size: 0.24rem;
	}
	
	
	
	.article_b {
		
		margin-top: 30px;
		background-color: #FFFFFF;
	}
	
	.article_b h1 {
		margin-right: 20px;
		padding: 20px 0px 20px 10px;
		font-size: 0.26rem;
		color: #1b1b1b;
		background: url(../assets/1-1.jpg) no-repeat right;
		background-size: 2%;
	}
	
	.article_b h1 span:nth-child(1) {
		margin-left: 6px;
	}
	
	.article_b h1 span:nth-child(2) {
		color: #cc5f62;
		margin-left: 6px;
	}
	
	.article_c {
		background-color: #FFFFFF;
		margin-top: 20px;
	}
	
	.article_c1 {
		background: url(../assets/1-7.jpg) no-repeat 50% 0px;
		background-size: cover;
		height: 304px;
		overflow: hidden;
	}
	
	.article_c1 h1:nth-child(1) {
		text-align: center;
		width: 100%;
		margin-top: 130px;
		font-size: 0.3rem;
		color: #FFFFFF;
		text-shadow: 2px 0px 3px rgba(0, 0, 0, 0.8);
	}
	
	.article_c1 h1:nth-child(2) {
		text-align: center;
		width: 100%;
		margin-top: 10px;
		font-size: 0.3rem;
		color: #FFFFFF;
		text-shadow: 2px 0px 3px rgba(0, 0, 0, 0.8);
	}
	
	.article_c2 {
		background: url(../assets/1-8.jpg) no-repeat 50% 0px;
		background-size: cover;
		height: 304px;
		margin-top: 20px;
		overflow: hidden;
	}
	
	.article_c2 h1 {
		width: 100%;
		height: 65px;
		margin: 0 auto;
		margin-top: 239px;
		text-align: center;
		background-color: rgba(225, 225, 225, 0.8);
		line-height: 65px;
		font-size: 0.28rem;
	}
	
	.article_c3 {
		background: url(../assets/1-9.jpg) no-repeat 50% 0px;
		background-size: cover;
		height: 304px;
		margin-top: 20px;
		overflow: hidden;
	}
	
	.article_c3 h1 {
		width: 100%;
		height: 65px;
		margin: 0 auto;
		margin-top: 239px;
		text-align: center;
		background-color: rgba(225, 225, 225, 0.8);
		line-height: 65px;
		font-size: 0.28rem;
	}
	
	.nav_a {
		background-color: #FFFFFF;
	}
	
	.nav_a ul {
		display: flex;
	}
	
	.nav_a ul li {
		flex: 1;
		text-align: center;
		height: 120px;
		line-height: 120px;
		font-size: 0.3rem;
	}
	
	.nav_a ul li a {
		color: #959595;
	}
	
	.nav_a ul li:hover {
		border-bottom: 2px solid #fed201;
		text-decoration: none;
	}
	
	.nav_a ul li a:hover {
		color: #4D4D4D;
	}
	
	.article_d {
		width: 100%;
		padding-top: 20px;
		background-color: #FFFFFF;
		display: flex;
	}
	
	.article_d dl {
		width: 40%;
		margin-left: 2.5%;
		margin-right: 2.5%;
		flex: 1;
	}
	
	.article_d dl dt img {
		width: 100%;
	}
	
	.article_d1 {
		margin: 20px 0px;
		width: 100%;
		font-size: 0.26rem;
	}
	
	.article_d2 {
		margin-top: 20px;
		margin-bottom: 30px;
		width: 100%;
		height: 0.4rem;
		font-size: 0.35rem;
		background: url(../assets/weixihuan@2x.png) no-repeat right;
		background-size: 10%;
	}
	
	.bottom {
		margin-top: 200px;
	}
</style>